@import "./font-size.less";
html {
  font-family: SFUIText-Regular, PingFang-SC, 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--text-color);
}
a{
  color: var(--text-color);
}
a:hover,input:hover,button:hover,textarea:hover,a:focus,input:focus,button:focus,textarea:focus {
  outline: none;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.unselected {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.underline {
  text-decoration: underline;
}
a.underline {
  text-decoration: underline;
}

.animated.short{animation-duration: 300ms;}
.animated.normal{animation-duration: 600ms;}
@keyframes myFadeIn{
  0%{opacity:0; transform:translateY(.5rem)}
  to{opacity:1; transform:translateY(0)}
}
.myFadeIn{animation-name:myFadeIn}
@keyframes myFadeOut{
  0%{opacity:1;}
  to{opacity:1;}
}
.myFadeOut{animation-name:myFadeOut}

.flex {display: flex;}
.flex-items-center {align-items: center;}
.flex-items-end {align-items: flex-end;}
.flex-center {justify-content:center;}
.flex-between {justify-content: space-between;}
.flex-around {justify-content: space-around;}
.flex-evenly {justify-content: space-evenly;}
.flex-start {justify-content:flex-start;}
.flex-end {justify-content:flex-end;}
.flex-column {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.flex-1 {flex: 1; min-width: 0;}
.flex-2 {flex: 2; min-width: 0;}
.flex-3 {flex: 3; min-width: 0;}
.flex-4 {flex: 4; min-width: 0;}
.flex-5 {flex: 5; min-width: 0;}
.flex-6 {flex: 6; min-width: 0;}

.lh10 {line-height: 1;}
.lh12 {line-height: 1.2;}
.lh13 {line-height: 1.3;}
.lh14 {line-height: 1.4;}
.lh15 {line-height: 1.5;}
.lh16 {line-height: 1.6;}
.lh17 {line-height: 1.7;}
.lh18 {line-height: 1.8;}
.lh19 {line-height: 1.9;}
.lh20 {line-height: 2;}

.page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100vh;
  background-color: var(--bg-color);
  overflow-y: hidden;
  &.wrap {
    height: calc(100vh - 50px);
  }
}
.page-main {
  position: absolute;
  left: 0;
  top: var(--navbar-height);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  &.min-height {
    min-height: calc(100vw * 1.65 - var(--navbar-height) - var(--statusbar-height));
  }
  &.no-navbar {
    top: 0;
  }
  &.padding,.padding {padding: 5PX 15PX 30PX;}
  .full {margin-left: -15PX; margin-right: -15PX; }
}

// 设置嵌入模式时page-main的top值
.app .page-main.overlays {
  top: calc(var(--statusbar-height) + var(--navbar-height));
}
.app .page-main.no-navbar.overlays {
  top: calc(var(--statusbar-height));
}

// app中状态栏高度占位
.statusbar-placeholder {
  padding-top: var(--statusbar-height);
  height: 0;
  line-height: 0;
  display: none;
}
.app .statusbar-placeholder.overlays {display: block;}
.app .statusbar-placeholder.overlays.hidden {display: none;}


.inner {
  padding-left: 15PX;
  padding-right: 15PX;
}
.inner-padding {
  transition: padding .4s ease;
  will-change: padding;
  .padding-left(36px);
  .padding-right(36px);
  @media @max768{
    .padding-right(20px);
    .padding-left(20px);
  }
}


.fit-height {height: 100%;}
.fit-width {width: 100%;}
.fit-min-height {min-height: 100%;}
.rp {position: relative;}
.ap {position: absolute;}
.animated.short{animation-duration: 300ms;}
.animated.normal{animation-duration: 600ms;}
.light{font-weight: 500;}
.blod{font-weight: 700;}
.bloder{font-weight: 900;}
.lighter{font-weight: lighter;}
.disc {-webkit-text-security:disc; text-security:disc;}
.vam {vertical-align: middle;}
// .box-shadow {box-shadow:@box-shadow;}
.auto-x {overflow-x: auto;}
.auto-y {overflow-y: auto;}

.white {color: var(--white);}
.black {color: var(--black);}
.gray-1 {color: var(--gray-1);}
.gray-2 {color: var(--gray-2 );}
.gray-3 {color: var(--gray-3);}

.f10 {.text-size(10px);}
.f11 {.text-size(11px);}
.f12 {.text-size(12px);}
.f13 {.text-size(13px);}
.f14 {.text-size(14px);}
.f15 {.text-size(15px);}
.f16 {.text-size(16px);}
.f18 {.text-size(18px);}
.f20 {.text-size(20px);}
.f22 {.text-size(22px);}
.f24 {.text-size(24px);}
.f25 {.text-size(25px);}
.f26 {.text-size(26px);}
.f28 {.text-size(28px);}
.f30 {.text-size(30px);}
.f32 {.text-size(32px);}
.f34 {.text-size(34px);}
.f36 {.text-size(36px);}
.f38 {.text-size(38px);}
.f40 {.text-size(40px);}
.f46 {.text-size(46px);}
.f60 {.text-size(60px);}

/*margin*/
.mt2 {.margin-top(2px)}
.mt5 {.margin-top(5px)}
.mt6 {.margin-top(6px)}
.mt8 {.margin-top(8px)}
.mt10 {.margin-top(10px)}
.mt15 {.margin-top(15px)}
.mt20 {.margin-top(20px)}
.mt22 {.margin-top(22px)}
.mt25 {.margin-top(25px)}
.mt30 {.margin-top(30px)}
.mt35 {.margin-top(35px)}
.mt40 {.margin-top(40px)}
.mt45 {.margin-top(45px)}
.mt50 {.margin-top(50px)}
.mt55 {.margin-top(55px)}
.mt60 {.margin-top(60px)}
.mt65 {.margin-top(65px)}
.mt70 {.margin-top(70px)}
.mt80 {.margin-top(80px)}
.mt90 {.margin-top(90px)}
.mt100 {.margin-top(100px)}
.mt110 {.margin-top(110px)}
.mt120 {.margin-top(120px)}
.mt150 {.margin-top(1.5px)}
.mt190 {.margin-top(190px)}

.mb10 {.margin-bottom(10px)}
.mb15 {.margin-bottom(15px)}
.mb20 {.margin-bottom(20px)}
.mb30 {.margin-bottom(30px)}
.mb40 {.margin-bottom(40px)}
.mb50 {.margin-bottom(50px)}
.mb60 {.margin-bottom(60px)}
.mb100 {.margin-bottom(100px)}

.ml5 {.margin-left(5px)}
.ml10 {.margin-left(10px)}
.ml12 {.margin-left(12px)}
.ml15 {.margin-left(15px)}
.ml20 {.margin-left(20px)}
.ml25 {.margin-left(25px)}
.ml30 {.margin-left(30px)}
.ml40 {.margin-left(40px)}
.ml45 {.margin-left(45px)}
.ml50 {.margin-left(50px)}
.ml70 {.margin-left(70px)}
.ml80 {.margin-left(80px)}
.ml100 {.margin-left(100px)}
.ml120 {.margin-left(120px)}
.ml150 {.margin-left(150px)}
.ml300 {.margin-left(300px)}

.mr5 {.margin-right(5px)}
.mr10 {.margin-right(10px)}
.mr15 {.margin-right(15px)}
.mr20 {.margin-right(20px)}
.mr30 {.margin-right(30px)}
.mr40 {.margin-right(40px)}
.mr50 {.margin-right(50px)}
.mr100 {.margin-right(100px)}

/*padding*/
.p10 {padding:10px;}
.p15 {padding:15px;}
.p30 {padding:30px;}

.pt0 {.padding-top( 0);}
.pt5 {.padding-top(5px)}
.pt8 {.padding-top(8px)}
.pt10 {.padding-top(10px)}
.pt15 {.padding-top(15px)}
.pt20 {.padding-top(20px)}
.pt30 {.padding-top(30px)}
.pt40 {.padding-top(40px)}
.pt45 {.padding-top(45px)}
.pt50 {.padding-top(50px)}
.pt60 {.padding-top(60px)}

.pb5  {.padding-bottom(5px)}
.pb10 {.padding-bottom(10px)}
.pb15 {.padding-bottom(15px)}
.pb20 {.padding-bottom(20px)}
.pb30 {.padding-bottom(30px)}
.pb40 {.padding-bottom(40px)}
.pb50 {.padding-bottom(50px)}
.pb100 {.padding-bottom(100px)}

.pl5 {.padding-left(5px)}
.pl10 {.padding-left(10px)}
.pl15 {.padding-left(15px)}
.pl20 {.padding-left(20px)}
.pl30 {.padding-left(30px)}
.pl35 {.padding-left(35px)}
.pl40 {.padding-left(40px)}
.pl45 {.padding-left(45px)}
.pl50 {.padding-left(50px)}
.pl80 {.padding-left(80px)}
.pl100 {.padding-left(100px)}

.pr5  {.padding-right(5px)}
.pr10 {.padding-right(10px)}
.pr15 {.padding-right(15px)}
.pr20 {.padding-right(20px)}
.pr30 {.padding-right(30px)}
.pr40 {.padding-right(40px)}
.pr50 {.padding-right(50px)}
.pr100 {.padding-right(100px)}

.eye {
  width: 20px;
  vertical-align: middle;
}
